<template>
  <!-- 套餐出库详情 -->
  <view>
    <view class="content">
      <view class="title">
        <view class="title_left">采购商品明细</view>
        <view class="title_right">
          <view>共<text></text>件商品</view>
          <view class="total">总计：<text>￥{{list.reduce((prev,item)=>prev * 1 + item.money_all *1,0)| number_format(2)  }}</text></view>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item" v-for="(item, index) in list" :key="index">
          <view class="list_item_title">
            <view class="name">
              <view class="point"></view>
              <view>{{ item.goods_name }}</view>
            </view>
          </view>
          <view class="type-inventory">
            <view>使用类型：{{ item.use_type_name }}</view>
            <view>数量：{{ item.goods_num_all }}</view>
          </view>
          <view class="subtotal">
            小计：<text>￥{{ item.money_all }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
  mounted() {
    console.log(this.list,'list------');
  },
};
</script>

<style lang="scss" scoped>
.content {
  .title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;

    .title_left {
      color: rgba(153, 153, 153, 1);
      font-size: 26rpx;
      font-family: SourceHanSansSC-regular;
    }

    .title_right {
      display: flex;
      justify-content: space-between;
      color: rgba(153, 153, 153, 1);
      font-size: 26rpx;
      font-family: SourceHanSansSC-regular;

      text {
        color: red;
        font-weight: bold;
      }

      .total {
        margin-left: 10rpx;

        text {
          font-weight: bold;
          color: #d12312;
        }
      }
    }
  }

  .list_box {
    .list_item {
      width: 100%;
      // height: 160rpx;
      line-height: 55rpx;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      padding: 20rpx 20rpx;
      font-family: SourceHanSansSC-regular;
      border-bottom: 0.5rpx solid #e7e4e4;

      .list_item_title {
        display: flex;
        justify-content: space-between;

        .name {
          display: flex;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
          font-family: SourceHanSansSC-bold;
          align-items: center;
          font-weight: bold;

          .point {
            width: 15rpx;
            height: 15rpx;
            border-radius: 50%;
            background: rgba(98, 177, 88, 1);
            margin-right: 10rpx;
          }
        }
      }

      .type-inventory {
        display: flex;
        justify-content: space-between;

        text {
          color: red;
        }
      }

      .subtotal {
        display: flex;
        justify-content: flex-end;

        text {
          color: red;
        }
      }
    }
  }
}
</style>